<template>
  <view class="container detail">
    <template v-if="detail.id && detail.name">
      <div class="card">
        <div
          class="card-tag"
          v-if="detail.is_vip"
        >
          vip
        </div>
        <view class="card-header">
          <view class="card-header-title">{{ detail.name }}</view>
        </view>
        <view class="card-body">
          <image
            class="detail-image"
            :src="detail.thumb"
          />
        </view>
        <view class="card-body text-center">
          <button
            class="btn btn-primary"
            @click="enterPaintMode"
          >
            <text class="iconfont icon-paint mr-5"></text>
            进入绘画模式
          </button>

          <button class="btn btn-success">
            <text class="iconfont icon-link mr-5"></text>
            分享给朋友
          </button>
        </view>
        <view class="card-footer mt-20">
          <view class="card-footer-item text-sm text-gray-light">
            <text class="iconfont icon-favorite text-primary mr-5"></text> 0
          </view>
          <view class="card-footer-item text-sm text-gray-light">
            分类：
            <text class="text-primary ml-5">{{ category.name }}</text>
          </view>
          <view class="card-footer-item text-sm text-gray-light">
            <text class="iconfont icon-browse text-primary mr-5"></text> 0
          </view>
          <view class="card-footer-item text-sm text-gray-light">
            <text class="iconfont icon-paint text-primary mr-5"></text> 10
          </view>
        </view>
      </div>

      <view class="card mt-20">
        <view class="card-body">
          <view class="section-title">
            <view class="section-title-text">扩展阅读</view>
          </view>

          <rich-content
            class="detail-content"
            :content="detail.desc"
          ></rich-content>
        </view>
      </view>
    </template>
    <comm-beian></comm-beian>
    <comm-fix-footer></comm-fix-footer>
  </view>
</template>

<script>
  export default {
    name: "DetailPage",
    data() {
      return {
        detail: {},
        category: {},
      };
    },
    created() {},

    onLoad(options) {
      this.detail.id = options.id;

      // 从this.$config.demo.list中获取数据

      // 从this.$config.demo.category中获取分类数据
    },

    mounted() {
      this.getDetail();
    },
    methods: {
      enterPaintMode() {
        // 检查用户是否登录
        if (!this.user || !this.user.username) {
          uni.navigateTo({
            url: "/pages/ucenter/login",
          });
          return;
        }
        //检查是否是vip，如果不是vip，则提示需要vip权限
        if (this.detail.is_vip) {
          uni.showModal({
            title: "提示",
            content: "需要vip权限才可以进入绘画模式",
            // 确定按钮的文字
            confirmText: "去开通",
            // 取消按钮的文字
            cancelText: "取消",
            success: (res) => {
              if (res.confirm) {
                // 跳转到vip页面
                uni.navigateTo({
                  url: "/pages/ucenter/vip",
                });
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }

        this.toPaint();
      },

      toPaint() {
        uni.setStorageSync("detail_id", this.detail.id);
        setTimeout(() => {
          console.log("enterPaintMode", this.detail.id);
          uni.switchTab({
            url: "/pages/painter/index?id=" + this.detail.id,
            success: (res) => {},
            fail: (res) => {
              console.log(res);
            },
            complete: (res) => {},
          });
        }, 20);
      },

      getDetail() {
        this.$request({
          url: "/detail/" + this.detail.id + ".json",
          method: "GET",
        }).then((res) => {
          console.log("detail.json", res);
          this.detail = res;
          this.category = this.$config.demo.category.find(
            (item) => item.id == this.detail.category_id,
          );
          console.log(" this.detail", this.detail);
          uni.setNavigationBarTitle({
            title: this.detail.name + " - 简笔画画法",
          });
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .detail {
    &-image {
      width: 700rpx;
      height: 700rpx;
    }

    &-content {
      line-height: 2.2;
      p {
        margin-bottom: 40rpx;
      }

      img {
        width: 100%;
        max-width: 100%;
        height: auto;
      }
    }
  }
</style>
